<template>
  <div class="songyuan-boundary" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
    <div class="content-container">
      <div class="chart-container">
<!--        <svg width="100%" height="50%" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">-->
<!--          <path :d="boundaryPath" fill="#007bff" stroke="#fff" stroke-width="2" transform="translate(200, 10) scale(0.8)"/>-->
<!--        </svg>-->
           <div class="BigData">
             <div class="big-tit">
               <h2>池北区住宅专项维修资金应用展示</h2>
             </div>
             <div class="accu-demo accu-bg1">
               <h3>累计总户数</h3>
               <span><em class="col-blue">611.508</em>户</span>
             </div>
             <div class="accu-demo accu-bg2">
               <h3>累计总金额</h3>
               <span><em class="col-yellow">611.508</em>元</span>
             </div>
              <div class="BigData-main">
                    <div class="BigData-main-con">
                        <div class="main-demo bigdata-demo-1">
                         <!-- 添加滚屏列表 -->
                          <div class="l-box l-box-1">
                            <div class="common-tit">滚屏列表</div>
                            <div class="scroll-list">
                              <el-table :data="tableData" style="width: 100%" :show-header="false">
                                <el-table-column prop="date" label="日期"></el-table-column>
                                <el-table-column prop="name" label="姓名"></el-table-column>
                                <el-table-column prop="address" label="地址"></el-table-column>
                              </el-table>
                            </div>
                          </div>
                           <div class="l-box l-box-2" >
                              <div class="common-tit">用途分类户数</div>
                              <div id="pieChart" class="chart-box"></div><!-- 饼图-->
                           </div>
                           <div class="l-box l-box-3">
                             <div class="common-tit">年度数据报表</div>
                            <div id="barChart" class="chart-box"></div><!-- 柱状图-->
                           </div>
                         </div>
                        <div class="main-demo bigdata-demo-2">
                          <div class="c-box c-box-1">
                            <div class="map-tit">
                              <h2>池北区</h2>
                            </div>
                            <div class="daydata-box">
                              <div class="data-demo data-demo-1">
                                <h3>548,480</h3>
                                <span>当日缴费笔数</span>
                              </div>
                              <div class="data-demo data-demo-2">
                                <h3>548,480</h3>
                                <span>当日缴费金额</span>
                              </div>
                              <div class="data-demo data-demo-3">
                                <h3>548,480</h3>
                                <span>当日维修户数</span>
                              </div>
                            </div>
                            <div class="operation-box">
<!--                              <div class="operation-demo">-->
<!--                                &lt;!&ndash; 仪表盘&ndash;&gt;-->
<!--                              </div>-->
                            </div>
<!--                            <svg width="100%" height="100%" viewBox="20 30 800 600" preserveAspectRatio="xMidYMid meet">-->
<!--                              <path :d="boundaryPath" fill="#13277a" stroke="#28ccd3" stroke-width="2" transform="translate(900, -510) scale(1.5)" />-->
<!--                            </svg>-->
                            <svg width="100%" height="100%" viewBox="20 30 800 600" preserveAspectRatio="xMidYMid meet">
                              <path :d="boundaryPath" fill="#13277a" stroke="#28ccd3" stroke-width="2" transform="translate(140, -850) scale(2)" />
                            </svg>
                          </div>
                          <div class="c-box c-box-2">
                            <div class="map-table">
                              <div class="l-table">
                                <ul class="t-head">
                                  <li>开发企业</li>
                                  <li>街道办事处</li>
                                  <li>社区</li>
                                </ul>
                                <ul class="t-con">
                                  <li>88</li>
                                  <li>88</li>
                                  <li>99</li>
                                </ul>
                              </div>
                              <div class="r-table">
                                <ul class="t-head">
                                  <li>业主委员会</li>
                                  <li>物业公司</li>
                                  <li>施工企业</li>
                                </ul>
                                <ul class="t-con">
                                  <li>88</li>
                                  <li>88</li>
                                  <li>99</li>
                                </ul>
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="main-demo bigdata-demo-3">
                          <div class="r-box r-box-1">
                            <div class="thisYear-list" ref="thisYearList">
                              <div class="thisYear-demo">
                                <h3>本年缴费金额</h3>
                                <span>254.5367</span>
                                <p class="zb-add">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-up"></span></p>
                              </div>
                              <div class="thisYear-demo">
                                <h3>本年缴费户数</h3>
                                <span>254.5367</span>
                                <p class="zb-add">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-up"></span></p>
                              </div>
                              <div class="thisYear-demo">
                                <h3>本年维修金额</h3>
                                <span>254.5367</span>
                                <p class="zb-add">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-up"></span></p>
                              </div>
                              <div class="thisYear-demo">
                                <h3>本年维修户数</h3>
                                <span>254.5367</span>
                                <p class="zb-minus">比同期<span>40%</span><span class="glyphicon glyphicon-arrow-down"></span></p>
                              </div>
                            </div>

                          </div>
                          <div class="r-box r-box-2">
                            <div class="common-tit">收缴比率</div>
                            <div id="gaugeChart" class="tc-chart-box"></div>
                            <div id="lineChart" class="chart-box" style="display: none"></div> <!-- 新增线型图 -->
                          </div>
                          <div class="r-box r-box-3">
                            <div class="common-tit">用途分类面积</div>
                            <div id="ringChart" class="chart-box"></div>
                          </div>
                          <!-- 环形图-->
<!--                           <div id="gaugeChart" style="width: 50%; height: 40%;"></div>&lt;!&ndash; 仪表盘&ndash;&gt;-->

                         </div>

                    </div>
              </div>
           </div>
        </div>
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {getDoorSumByPurpose, getCostSumYear,getDoorInfo,getTripartiteSum,
  getCostSumToday,getDoorSum,getDoorCountByCostSts,getDoorSumByYear} from "@/api/report/fundUsage"; // 新增导入 getCostSumYear 接口

export default {
  data() {
    return {
      backgroundImage: '',
      boundaryPath: 'M20 728L24 726L36 725L89 725L90 727L93 723L90 711L91 703L89 700L85 699L85 693L79 690L79 687L82 684L80 680L86 679L89 677L89 675L97 677L106 676L107 673L112 669L113 665L118 662L120 657L124 656L128 659L136 656L136 653L129 649L129 645L132 644L136 636L132 632L132 628L126 622L129 613L124 604L121 602L124 590L122 582L118 580L120 572L118 568L115 566L116 561L113 560L113 557L106 552L107 547L105 545L106 540L104 538L107 531L111 529L113 524L119 521L120 516L124 520L130 522L132 521L137 525L140 524L145 526L151 533L159 527L158 521L152 510L158 508L157 500L160 499L169 506L171 504L172 498L175 495L180 496L181 495L179 492L186 490L187 487L190 485L190 488L194 491L196 489L209 490L218 487L216 485L217 480L214 479L213 474L217 469L223 469L225 466L223 459L214 454L206 455L202 452L197 443L200 433L204 432L204 430L208 428L205 419L209 412L205 409L203 405L199 403L197 399L196 394L200 390L200 388L196 386L192 387L189 383L188 385L181 386L180 389L176 389L174 393L169 395L169 399L165 399L162 404L159 402L150 407L150 410L145 415L143 411L142 412L138 409L138 411L132 413L131 417L126 422L125 430L130 437L129 441L133 452L130 452L129 454L128 453L125 455L125 460L122 462L119 463L119 461L115 459L115 457L111 456L103 456L101 458L98 455L93 456L89 452L84 453L81 451L79 451L76 454L73 453L69 448L63 448L62 453L55 451L55 453L51 457L52 461L49 464L43 464L40 466L37 464L33 467L31 465L27 468L22 469L23 473L21 476L24 479L29 478L31 480L32 479L33 481L31 483L33 488L29 492L27 492L25 501L28 506L33 508L31 515L39 517L41 519L35 529L34 534L36 535L36 537L34 541L32 543L23 541L21 544L16 545L10 542L8 539L5 539L1 536L-1 538L1 548L-4 551L-6 557L-9 554L-19 550L-19 552L-16 554L-15 559L-9 562L-10 563L-12 561L-12 565L-5 565L-3 568L2 570L0 574L1 578L4 579L3 580L8 585L7 587L12 591L12 593L14 593L12 597L15 602L14 609L17 613L12 620L11 628L1 635L-1 641L-9 641L-9 645L-12 650L-20 650L-25 652L-26 654L-26 658L-22 662L-18 662L-16 664L-15 663L-13 670L-11 672L-8 671L-7 680L-5 684L3 690L2 696L6 700L13 712L15 723L18 726z" data-spm-anchor-id="a2crr.b71357980.area-selector.i13.3e1526c0VaFJVM',
      tableData: [], // 初始化为空数组，等待接口返回数据后更新
      scrollInterval: null,
      ringChartData: [], // 新增环形图数据
      costSumYearData: [] // 新增年度费用数据
    };
  },
  mounted() {
    this.setBackgroundImage();
    this.initBarChart();
    this.getRingChartData(); // 获取环形图数据
    this.getPieChartData(); //
    this.initGaugeChart();
    this.initLineChart();
    this.getDoorInfoData(); // 获取滚动列表数据
    this.startScroll();
    this.getCostSumYearData(); // 获取年度费用数据
    this.getCostSumTodayData(); // 获取当日费用数据
    this.getDoorSumData(); // 获取总数据
    this.getTripartiteSumData(); // 获取三方数据
  },
  methods: {
    setBackgroundImage() {
      this.backgroundImage = 'http://pshome.zanysoft.xyz/pshouse_wx/BigData-bg.jpg';
    },
    // 获取滚动列表数据并更新展示
    getDoorInfoData() {
      getDoorInfo().then(response => {
        this.tableData = response.rows.map(item => {
          return {
            date: item.costDate, // 假设接口返回的日期字段为 costDate
            name: item.userName, // 假设接口返回的姓名字段为 userName
            address: item.doorAddr // 假设接口返回的地址字段为 doorAddr
          };
        });
      });
    },
    initBarChart() {
      const barChart = echarts.init(document.getElementById('barChart'));
      const option = {
        title: {
          // text: '柱状图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [], // 初始为空，等待接口返回数据后更新
          axisLabel: {
            color: '#fff' // 将 x 轴文字颜色设置为白色
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
/*            color: '#fff', // 将 y 轴文字颜色设置为白色
            formatter: function(value) {
              // 修改: 返回自定义格式的数值，例如直接返回 value 或者其他格式
              return value; // 直接返回 value，显示原始数值
              // 或者可以根据需求进行其他格式化，例如：
              // return value.toLocaleString(); // 使用千位分隔符
            }*/
          },
          splitLine: {
            show: true, // 显示刻度线
            lineStyle: {
              color: '#fff' // 设置刻度线颜色为白色
            }
          }
        },
        series: [
          {
            name: '总分摊金额',
            type: 'bar',
            data: [],// 初始为空，等待接口返回数据后更新
            itemStyle: {
              color: '#007bff' // 这里设置柱状图的颜色
            }

          },
          {
            name: '总缴费金额',
            type: 'bar',
            data: [] // 初始为空，等待接口返回数据后更新
          },
          {
            name: '总利息金额',
            type: 'bar',
            data: [], // 初始为空，等待接口返回数据后更新
            itemStyle: {
              color: '#e6ff00' // 这里设置柱状图的颜色
            }
          }
        ]
      };
      barChart.setOption(option);
      this.getDoorSumByYearData(barChart); // 调用接口获取数据并更新柱状图
    },

    // 获取年度数据并更新柱状图
    getDoorSumByYearData(barChart) {
      getDoorSumByYear().then(response => {
        const data = response.rows; // 假设接口返回的数据是一个数组
        // 对年度数据进行从小到大排序
        data.sort((a, b) => new Date(a.costDate) - new Date(b.costDate));
        const years = data.map(item => item.costDate); // 提取年度
        const repairMoneys = data.map(item => item.repairMoney);
        const costMoneys = data.map(item => item.costMoney);
        const rateMoneys = data.map(item => item.rateMoney);

        barChart.setOption({
          xAxis: {
            data: years // 更新x轴数据
          },
          series: [
            {
              data: repairMoneys // 更新总户数数据
            },
            {
              data: costMoneys // 更新总缴费金额数据
            },
            {
              data: rateMoneys // 更新总余额数据
            }
          ]
        });
      });
    },

    getPieChartData() {
      getDoorSumByPurpose().then(response => {
        this.pieChartData = response.rows.map(item => {
          return { value: item.doorSum, name: item.purposeName }; // 修改为使用 purposeName 和 space
        });
        this.initPieChart();
      });
    },
    initPieChart() {
      const pieChart = echarts.init(document.getElementById('pieChart'));
      const option = {
        title: {
          // text: '饼状图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '户数',
            type: 'pie',
            radius: '50%',
            data: this.pieChartData, // 使用接口返回的数据
            itemStyle: {
              color: function(params) {
                // 自定义颜色数组
                const colorList = ['#5470C6', '#91CC75', '#EE6666', '#FAC858', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4', '#EA7CCC'];
                return colorList[params.dataIndex % colorList.length];
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    },
    getRingChartData() {
      getDoorSumByPurpose().then(response => {
        this.ringChartData = response.rows.map(item => {
          return { value: item.space, name: item.purposeName }; // 修改为使用 purposeName 和 space
        });
        this.initRingChart();
      });
    },
    initRingChart() {
      const ringChart = echarts.init(document.getElementById('ringChart'));
      const option = {
        title: {
          // text: '环形图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '面积',
            type: 'pie',
            radius: ['40%', '70%'],
            data: this.ringChartData, // 使用接口返回的数据
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      ringChart.setOption(option);
    },

    initGaugeChart() {
      const gaugeChart = echarts.init(document.getElementById('gaugeChart'));
      const option = {
        title: {
          // text: '仪表盘示例',
          // left: 'center'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '进度',
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}%'
            },
            data: [
              {
                value: 0, // 初始值为0，等待接口返回数据后更新
                name: '完成率'
              }
            ]
          }
        ]
      };
      gaugeChart.setOption(option);
      this.getDoorCountByCostStsData(gaugeChart); // 调用接口获取数据并更新仪表盘
    },

    // 获取仪表盘数据并更新展示
    getDoorCountByCostStsData(gaugeChart) {
      getDoorCountByCostSts().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        const value = data.ratio5; // 假设接口返回的完成率字段为 ratio5
        gaugeChart.setOption({
          series: [
            {
              data: [
                {
                  value: value,
                  name: '完成率'
                }
              ]
            }
          ]
        });
      });
    },

    initLineChart() {
      const lineChart = echarts.init(document.getElementById('lineChart'));
      const option = {
        title: {
          // text: '线型图示例',
          // left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销量',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130]
          }
        ]
      };
      lineChart.setOption(option);
    },
    startScroll() {
      this.scrollInterval = setInterval(() => {
        this.tableData.push(this.tableData.shift());
      }, 2000);
    },
    stopScroll() {
      clearInterval(this.scrollInterval);
    },
    getCostSumYearData() {
      getCostSumYear().then(response => {
        this.costSumYearData = response.data; // 存储年度费用数据
        this.updateCostSumYearDisplay(); // 更新展示
      });
    },
    // 获取总数据并更新展示
    getDoorSumData() {
      getDoorSum().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        // 更新累计总户数、累计总金额
        document.querySelector('.accu-bg1 em').textContent = data.doorSum;
        document.querySelector('.accu-bg2 em').textContent = data.costMoney;
      });
    },
    // 获取当日费用数据并更新展示
    getCostSumTodayData() {
      getCostSumToday().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        // 更新当日缴费笔数、当日缴费金额、当日维修户数
        document.querySelector('.data-demo-1 h3').textContent = data.costSum;
        document.querySelector('.data-demo-2 h3').textContent = data.costMoney;
        document.querySelector('.data-demo-3 h3').textContent = data.repairSum;
      });
    },
    updateCostSumYearDisplay() {
        const data = this.costSumYearData; // 假设接口返回的数据是一个数组，取第一个元素
        // 更新本年缴费金额、本年缴费户数、本年维修金额、本年维修户数及比同期比率
        //1是costsum，2是costmoney，3是repairsum，4是repairmoney
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(1) span').textContent = data.costMoney;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(1) p span').textContent = data.ratio2;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(2) span').textContent = data.costSum;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(2) p span').textContent = data.ratio1;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(3) span').textContent = data.repairMoney;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(3) p span').textContent = data.ratio4;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(4) span').textContent = data.repairSum;
        this.$refs.thisYearList.querySelector('.thisYear-demo:nth-child(4) p span').textContent = data.ratio3;
    },
    // 获取三方数据并更新展示
    getTripartiteSumData() {
      getTripartiteSum().then(response => {
        const data = response.data; // 假设接口返回的数据是一个对象
        // 更新开发企业、街道办事处、社区、业主委员会、物业公司、施工企业的数据
        document.querySelector('.l-table .t-con li:nth-child(1)').textContent = data.estateSum;
        document.querySelector('.l-table .t-con li:nth-child(2)').textContent = data.streetSum;
        document.querySelector('.l-table .t-con li:nth-child(3)').textContent = data.communitySum;
        document.querySelector('.r-table .t-con li:nth-child(1)').textContent = data.committeeSum;
        document.querySelector('.r-table .t-con li:nth-child(2)').textContent = data.propertySum;
        document.querySelector('.r-table .t-con li:nth-child(3)').textContent = data.companySum;
      });
    },
  },
  beforeDestroy() {
    this.stopScroll();
  }
};
</script>

<style scoped>
.songyuan-boundary {
  width: 100%;
  height: 1200px; /* 增加整体高度 */
  background-color: #f5f5f5;
  background-size: cover;
  background-position: center;
}

.content-container {
  display: flex;
  justify-content: center; /* 居中显示 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 100%;
}

.chart-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 居中显示 */
  width: 97%; /* 增加宽度 */
  height: 100%; /* 增加高度 */
}

.chart-box {
  width: 100%;
  height: calc(100% - 30px); /* 调整图表容器高度 */
  margin-top: 40px; /* 调整上边距 */
  position: relative;
}

.l-box-1 {
  height: 400px; /* 增加高度 */
}

.l-box-2 {
  flex: 1;
  height: 500px; /* 增加高度 */
}
.l-box-2 .chart-box {
  margin-top: 65px; /* 调整上边距 */
}
.l-box-3 {
  flex: 1;
  height: 500px; /* 增加高度 */
}

.r-box-2 {
  flex: 1;
  height: 400px; /* 增加高度 */
}

.r-box-3 {
  flex: 1;
  height: 500px; /* 增加高度 */
}

.scroll-list {
  width:auto;
  height: calc(100% - 46px);
  margin-top: 46px;
  overflow: hidden;
  margin-left: 20px;
  background-color: transparent; /* 设置背景为透明 */
  color: #fff; /* 设置文字颜色为白色，以便在背景图片上清晰可见 */
}
.scroll-list tbody tr{
  background: none !important;
}
.scroll-list .el-table {
  background-color: transparent; /* 设置表格背景为透明 */
}

.scroll-list .el-table th,
.scroll-list .el-table td {
  background-color: transparent; /* 设置表头和单元格背景为透明 */
  color: #fff; /* 设置表头和单元格文字颜色为白色 */
}
/*4-10*/
.BigData {
  width: 100%;
  height: 100%;
  /*background: url(../images/BigData-bg.jpg);*/
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
}

.BigData .big-tit {
  width: 100%;
  height: 55px;
  background: url(images/BigData-tit.png);
  text-align: center;
  background-size: 100% 100%;
  margin-top: 0;
}

.BigData .big-tit h2 {
  background-image: linear-gradient(bottom, #67ddf8, #ffffff 70%);
  background-image: -webkit-linear-gradient(bottom, #67ddf8, #ffffff 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-weight: bold;
  line-height: 55px;
}

.BigData-main {
  height: calc(100% - 20px);
  padding: 20px 15px 15px 15px;
}

.BigData-main .BigData-main-con {
  height: 100%;
  padding-top: 15px;
  display: flex;
  justify-content: left;
}
.bigdata-demo-1 {
  flex: 1;
  height: 100%;
}

.bigdata-demo-2 {
  flex: 2;
  height: 100%;
}
.bigdata-demo-2 {
  display: flex;
  flex-direction: column;
  padding-bottom: 60px;
}
.bigdata-demo-3 {
  flex: 1;
  height: 100%;
}
.common-tit {
  width: 100%;
  height: 40px;
  background: url('images/gg-titbg.png') no-repeat;
  background-size: auto 100%;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  padding-left: 30px;
  position: absolute;
  left: 0;
  top: 0;
}
.bigdata-demo-1 {
  display: flex
;
  flex-direction: column;
}
.bigdata-demo-1 {
  flex: 1;
  height: 100%;
}
.l-box {
  margin-bottom: 20px;
}
.qh_table table thead {
  width: 100%;
}

.qh_table table thead td {
  background: rgba(3, 236, 255, 0.2);
}

.bjzol_box_l tbody {
  width: 100%;
  display: block;
  height: 150px;
}

.bjzol_box_l .qh_table_1 td div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 40px;
  max-width: 100%;
  padding-left: 10px;
}

.l-box {
  margin-bottom: 20px;
}

.chart-box {
  width: 100%;
  height: calc(100% - 30px); /* 调整图表容器高度 */
  margin-top: 30px; /* 调整上边距 */
  position: relative;
}

.bigdata-demo-1 {
  display: flex;
  flex-direction: column
}

.l-box {
  /* flex: 1; */
  width: 100%;
  /* height: 33%; */
  position: relative;
}

.l-box-1 {
  height: 300px; /* 增加高度 */
}

.l-box-2 {
  flex: 1;
  height: 400px; /* 增加高度 */
}

.l-box-3 {
  flex: 1;
  height: 400px; /* 增加高度 */
}

.l-box-3 .chart-box {
  /* height: 210px; */
}
.map-table {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.l-table {
  flex: 1;
  padding-right: 5px;
}

.t-head {
  color: #2ad8df;
  height: 35px;
  line-height: 35px;
  background: rgba(3, 65, 121, 0.3);
  border-top: 1px solid #55eff1;
}

.t-con {
  color: #fff;
  line-height: 35px;
}

.map-table ul {
  display: flex;
  justify-content: space-between;
}

.map-table li {
  flex: 1;
}

.r-table {
  flex: 1;
  padding-left: 5px;
}
ol, ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.accu-demo {
  position: absolute;
  width: 315px;
  height: 70px;
  position: absolute;
  font-size: 16px;
  padding: 12px 0 0 130px;
  color: #fff;
}

.accu-bg1 {
  top: 25px;
  left: 30px;
  background: url(images/accu-slbg.png);
}

.accu-bg2 {
  top: 25px;
  right: 30px;
  background: url(images/accu-jebg.png);
}

.accu-demo h3 {
  font-size: 16px;
  color: #fff;
  line-height: 0;
}

.accu-demo span em {
  font-size: 18px;
  padding-right: 5px;
}
.map-tit {
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  width: 200px;
  height: 65px;
  padding-left: 70px;
  background: url(images/map-dot.png) no-repeat;
}

.map-tit h2 {
  line-height: 65px;
  font-size: 22px;
  color: #2ad8df;
}
.c-box-1 {
  flex: 1;
  background: url(images/map-bg.png) center bottom 50px no-repeat;
  background-size: 100% auto;
  position: relative;
}
.daydata-box {
  position: absolute;
  right: 40px;
  top: 0;
}

.data-demo {
  width: 216px;
  height: 57px;
  margin-bottom: 15px;
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 85px;
}

.data-demo h3 {
  width: 100%;
  color: #31f0f8;
  font-size: 18px;
  padding-bottom: 2px;
  margin: 0;
  line-height: normal;
}

.data-demo span {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 12px;
}

.data-demo-1 {
  background: url(images/datademo-bg1.png) no-repeat;
}

.data-demo-2 {
  background: url(images/datademo-bg2.png) no-repeat;
}

.data-demo-3 {
  background: url(images/datademo-bg3.png) no-repeat;
}

.operation-box {
  width: 480px;
  height: 260px;
  position: absolute;
  right: 40px;
  bottom: 50px;
  /*background: url(images/operation-bg.png) no-repeat;*/
  background-size: 100% 100%;
  display: flex;
}
.r-box {
  width: 100%;
  height: 33%;
  position: relative;
}

.r-box-1 {
  height: 270px;
}

/*.r-box-2 {*/
/*  flex: 1;*/
/*  height: 400px; !* 增加高度 *!*/
/*}*/

.r-box-2 .chart-box {
  top: 20px;
}

/*.r-box-3 {*/
/*  flex: 1;*/
/*  height: 400px; !* 增加高度 *!*/
/*}*/

.r-box-3 .chart-box {
  top: 46px;
  padding-top: 10px;
}
/*.operation-box {*/
/*  width: 323px;*/
/*  height: 146px;*/
/*  position: absolute;*/
/*  right: 40px;*/
/*  bottom: 50px;*/
/*  background: url(images/operation-bg.png) no-repeat;*/
/*  display: flex;*/
/*}*/

.operation-demo {
  flex: 1;
  position: relative;
}

.tc-chart-box {
  width: 100%;
  height: 100%;
}

.operation-demo h2 {
  width: 100%;
  position: absolute;
  bottom: 35px;
  text-align: center;
  color: #fff;
}
/* 本年数据对比 */

.thisYear-list {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
}

.thisYear-list .thisYear-demo {
  width: 50%;
  padding-left: 55px;
  margin-bottom: 2px;
}

.thisYear-list .thisYear-demo h3 {
  font-size: 16px;
  color: #fff;
}

.thisYear-list .thisYear-demo span {
  font-size: 24px;
  color: #2ad8df;
}

.thisYear-list .thisYear-demo p {
  color: #fff;
  font-size: 16px;
}

.thisYear-list .thisYear-demo p span {
  font-size: 16px;
  color: #f4300e;
  padding-left: 4px;
}

.thisYear-list .thisYear-demo p span.glyphicon {
  font-size: 12px;
  font-weight: 100;
}

.thisYear-demo:nth-child(1) {
  background: url(images/ico1.png) no-repeat left center;
  background-size: 40px 40px;
}

.thisYear-demo:nth-child(2) {
  background: url(images/ico2.png) no-repeat left center;
  background-size: 40px 40px;
}

.thisYear-demo:nth-child(3) {
  background: url(images/ico3.png) no-repeat left center;
  background-size: 40px 40px;
}

.thisYear-demo:nth-child(4) {
  background: url(images/ico4.png) no-repeat left center;
  background-size: 40px 40px;
}
/deep/ .scroll-list .el-table tr {
  background:none !important;
  color: #fff !important;
}
/deep/ .scroll-list .el-table tr:hover td{
  background:#0b77fd;
  color: #fff !important;
}
/deep/ .scroll-list .el-table tr td {
  border-bottom: 1px solid #192953;
}
/deep/ .scroll-list .el-table tr td:nth-child(2) {
  width: 50px;
}
</style>
